<template>
    <div class="all-list all-list-select">
        <el-card class="container mt-4">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>报名管理</span>
                <span style="font-size: 13px;padding-left: 25px;">总数为：{{ tableList.meta.total }}</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <!--<button v-if="user.type == 'admin'" class="list-button float-right mr-3"><a href="javascript:;" @click="exportInfo">信息导出</a></button>-->
                <button v-if="user.type == 'admin'" class="list-button float-right mr-3" ><a :href="'/api/export?api_token='+user.token+'&school_id='+queryModel.keyword">信息导出</a></button>
                <button v-if="user.type == 'admin'" class="list-button float-right mr-3" @click="importInfo"><a href="javascript:;">信息导入</a></button>
                <input type="file" hidden ref="importInfoFile" @change="getFile">
            </div>
            <vue-table :data-source="tableList" :queryString="queryModel">
                <template slot="header">
                    <tr>
                        <th scope="col">学生姓名</th>
                        <th scope="col">性别</th>
                        <th scope="col">身份证号</th>
                        <th scope="col d-flex justify-content-center">
                            <el-select v-model="queryModel.keyword" style="font-weight: 500" :disabled="disabled">
                                <el-option
                                        v-for="item in schoolNameList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </th>
                        <th scope="col">录取结果</th>
                        <th scope="col">操作</th>
                    </tr>
                </template>
                <template slot="tbody" slot-scope="props">
                    <tr :class=" props.index % 2 == 0 ? 'table-row':''">
                        <td>{{props.item.name}}</td>
                        <td>{{isSex(props.item.sex)}}</td>
                        <td>{{props.item.id_code}}</td>
                        <td>{{props.item.school_name}}</td>
                        <td>{{enroll(props.item.is_enroll)}}</td>
                        <td>
                            <el-tooltip content="修改" placement="top" class="mr-2">
                                <img src="../../images/updateimg.png" @click="update(props.item.id)" height="17" width="17"/>
                            </el-tooltip>
                            <el-tooltip content="打印" placement="top" class="mr-2">
                                <img src="../../images/print.png" @click="toPrint(props.item.id)" height="17" width="17"/>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <img src="../../images/deletedimg.png" @click="deleted(props.item.id)" height="17" width="17"/>
                            </el-tooltip>
                        </td>
                    </tr>
                </template>
            </vue-table>
        </el-card>
        <div>
            <cplanet-pagination :page-count="tableList.meta.last_page"
                        :total="tableList.meta.total"
                        :current-page="tableList.meta.current_page" @goPage="goPage"></cplanet-pagination>
        </div>
    </div>
</template>
<script>
import ListDataSource from '../libs/ListDataSource.js'
import Cookie from 'js-cookie';
import { mapState } from 'vuex'
import DataApi from '../api/data'
export default {
  data(){
    const downloadGet = (config) => {

      const url = config.url
      let iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = url
      iframe.onload = function () {
        document.body.removeChild(iframe)
      }
      document.body.appendChild(iframe)
    };
    return{
      tableList: new ListDataSource('/api/all-list'),
      model: this.$modelDataSource({
        url: '/api/all-list',
        dataKey: 'model',
        attributes: {
          id: 0,
        }
      }),
      queryModel:{
        keyword: '0'
      },
      refreshList: true,
      fileData:{},
      schoolNameList:[
        {name:'所有幼儿园',id:'0'},
        {name:'第一幼儿园',id:'101'},
        {name:'第二幼儿园',id:'102'},
        {name:'第四幼儿园',id:'104'},
        {name:'模范幼儿园',id:'106'},
        {name:'第三幼儿园',id:'103'},
        {name:'第五幼儿园',id:'105'}
      ],
      disabled: false,
    }
  },
  created () {
    let vm = this
    if(this.$route.params.school){
      vm.queryModel.keyword = this.$route.params.school
//      console.log(vm.queryModel.keyword)
      vm.disabled = true
    }
    this.isLoading = true
    Promise.all([
      vm.tableList.fetchData(vm.queryModel)
    ]).then(([Response]) => {
      vm.isLoading = false
    }).catch((error) => {
      vm.isLoading = false
    })
  },
  methods: {
    enroll(type){
      switch (type)
      {
        case 1:
          return '已录取'
        break;
        case 0:
          return '未录取'
        break;
        default:
          return '无'
      }
    },
    isSex(type){
      switch (type)
      {
        case '0':
          return '男'
        break;
        default:
          return '女'
      }
    },
    goPage: function (event) {
      let self = this
      let query = _.assign({page: event.page,keyword: self.queryModel.keyword}, self.queryString);
      self.tableList.fetchData(query)
    },
    update(id){
      this.$router.push({
        name: 'entering',
        params: {
          user_id: id
        }
      })
    },
    exportInfo(){
      let self = this
//      DataApi.getExportInfo(self.queryModel.keyword).then(res=>{
        axios.get('/api/export?school_id='+this.queryModel.keyword,(res) => {

          })
//        })
    },
    importInfo() {
      this.$refs.importInfoFile.click()
    },
    getFile(files){
      let self = this
      let file = files.target.files[0]
      console.log(file)
      this.fileData = new FormData()
      this.fileData.append('file', file)
      DataApi.postImportInfo(this.fileData).then(res=>{
          console.log('上传'+ res +'成功')
        self.refreshList = !self.refreshList
        self.$message.success('导入成功')
        }).catch(err=>{
        self.refreshList = !self.refreshList
          console.log(err.response)
        self.$message.error('导入失败')
      })
    },
    logout(){
      axios.post('/api/logout', {})
        .then(function (response) {
          Cookie.remove('user');
          window.location.reload();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deleted(id){
      let self = this
      this.$confirm('此操作将永久删除该学生,如果是双（多）胞胎，则会全部删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.model.fetch(id, {}, ()=>{})
        self.model.destroy(function () {
          self.$message.success('删除成功!')
          self.refreshList = !self.refreshList
        });
      }).catch(() => {
          self.$message({
            type: 'info',
            message: '取消删除'
          });
        });
    },
    toPrint(id){
      this.$router.push({
        name: 'print',
        params: {
          user_id: id
        }
      })
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
})
},
  watch: {
    'queryModel.keyword':function (value) {
      this.tableList.fetchData(this.queryModel)
    },
    'refreshList':function () {
      this.tableList.fetchData(this.queryModel)
    }
  },
}
</script>
